import React, { Component } from 'react';
import './Chepai.css';
import choose from '../../../assets/img/choose.svg'
import choosed from '../../../assets/img/choosed.svg'
const inputContent = {
	provinces: [
    "京",
    "沪",
    "粤",
    "津",
    "冀",
    "晋",
    "蒙",
    "辽",
    "吉",
    "黑",
    "苏",
    "浙",
    "皖",
    "闽",
    "赣",
    "鲁",
    "豫",
    "湘",
    "鄂",
    "桂",
    "琼",
    "渝",
    "川",
    "贵",
    "云",
    "藏",
    "陕",
    "甘",
    "青",
    "宁",
    "ABC",
    "挂",
    "新",
    "使",
    "领",
    "警",
    "学",
    "港",
    "澳",
  	],
	keyNums: [
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "Q",
    "W",
    "E",
    "R",
    "T",
    "Y",
    "U",
    "I",
    "O",
    "P",
    "A",
    "S",
    "D",
    "F",
    "G",
    "H",
    "J",
    "K",
    "L",
	"地区",
    "Z",
    "X",
    "C",
    "V",
    "B",
    "N",
    "M",
    "删除",
  ]
}

class Chepai extends Component {
	constructor(props) {
		super(props);
		console.log(props,'props2');
		this.state={
			open:this.props.open,
			energy:this.props.energy===0?false:true,//是否是新能源
			license:['-','-','-','-','-','-','-','-'],
			inputKey:this.props.inputKey||0,//输入的序号
			isTxt: this.props.isTxt, //输入的键盘
			selectEnergy:choose,
			bottom:this.props.bottom||'0px',//离底部的高度
			zIndex:this.props.zIndex||'0',
			status:"input",//input:输入状态，delete:删除状态
		};

	}

	// 生命周期 在组件接收新的 props 时执行一些逻辑
	componentWillReceiveProps(nextProps){
		// 打开键盘
		if(nextProps.open){
			this.setState({
				open:true,
			})
		}else{
			this.setState({
				open:false,
			})
		}


		// console.log(nextProps,'nextProps');
		let license = '';
		if(!nextProps.license){
			license = ['-','-','-','-','-','-','-','-'];
		}else{
			license = (nextProps.license).split('');
		}

		// console.log(license,'license');
		this.setState({
			isTxt:nextProps.inputKey == 0 ? true : false, // // 默认使用地区
			license:license,
			inputKey:nextProps.inputKey
		})
	}

 	// 修改值
	returnProps=()=>{
		let license=''
		this.state.license.map((value,i)=>{
			// let res = value==''?'-':license+=value;
			value==''?license+='-':license+=value;
		})
		// console.log(this.state.license, license)
		this.props.onChange({license:license, open:this.state.open, inputKey:this.state.inputKey})
	}

 // 选择地区，修改索引
	chooseProvince=(val)=>{
		// console.log('chooseProvince',val);
		if (val == "ABC") {
			this.setState({
				isTxt: false,
			});
			return
		}
		let license = this.state.license;
		// license[0] = val;
		license[this.state.inputKey] = val;

		let key;
		if(this.state.inputKey<7){
			key=this.state.inputKey+1;
		}else if(this.state.inputKey===7){
			key=this.state.inputKey;
		}

		this.setState({
			license:license,
			inputKey:key,
			status:"input",
		},()=>this.returnProps())
		if (this.state.isTxt) {
        this.setState({
          isTxt: false,
        });
      }
	}

	// 选中ABC值,修改索引
	choosekey=(val)=>{
		console.log(val, 'val', 'choosekey');
		if (val == "地区") {
			this.setState({
				isTxt: true,
			});
			return;
		}
		let license = this.state.license;
		//删除操作
		if(val==='删除'){
			let inputKey=this.state.inputKey;
			let delValIndex
			// console.log(license[inputKey]);
			// console.log(license[inputKey-1]);
			
			// 索引
			if (inputKey < 1) {
				delValIndex = inputKey;
			} else if ((license[inputKey] != undefined && license[inputKey] != "" && license[inputKey] != "-") && (license[inputKey-1] != "")) { 
				delValIndex = inputKey;
			} else {
				delValIndex = inputKey - 1;
				license[inputKey - 1] = "";
			}

			// 赋值
			license[inputKey] = "-";

			this.setState({
				license:license,
				inputKey:delValIndex,
				// status:"delete",
			},()=>{console.log(this.state.inputKey);this.returnProps()})
			return;
		}
		//确定操作
		if(val==='确定'){
			this.setState({
				open:false,
			},()=>this.returnProps())
			return;
		}
		//非新能源 输入信息，字母和数字
		if(val!=='删除'&&val!=='确定'){
			// 根据输入状态作不同操作
			//输入状态
			if(this.state.status==="input"){
				if(this.state.inputKey<8){
					license[this.state.inputKey] = val;
					this.setState({
						license:license,
						inputKey: this.state.inputKey <7 ? this.state.inputKey+1 : this.state.inputKey,
					},()=>this.returnProps())
				}
			}

		}
	}
	//清空输入信息
	cleanPro=()=>{
		console.log('清空')
		this.setState({
			isTxt: true,
		});
		this.setState({
			license:['-','-','-','-','-','-','-','-'],
			inputKey:0,//输入的序号
		},()=>{
			console.log(this.state.license,this.state.inputKey)
			this.returnProps()
		})
	}
	closePro=()=>{
		this.setState({
			open:false
		})
	}

	render() {
		return (<div className={"Chepai"} style={this.props.style||{height: '100%', width: '100%', top: 0}}>
			{this.state.open?<div>
				{this.state.isTxt?
					<ul className='clearfix ul_pro' style={{bottom:this.props.bottom||'50px',zIndex:this.state.zIndex}}>
						<div className="btnTxt">
							<span onClick={() => this.cleanPro()}>重置</span>
							<span onClick={() => this.closePro()}>完成</span>
						</div>
						{inputContent.provinces.map((value,i)=>{
							return(<li key={i}><span name="chepaiInput" className={value == "ABC" ? "btnABC" : ""} onClick={()=>this.chooseProvince(value)}>{value}</span></li>)
						})}
						{/* <li   className='li_close'><span onClick={()=>this.closePro()}>关闭</span></li> */}
						{/* <li name="chepaiInput" className='li_clean'><span name="chepaiInput" onClick={()=>this.cleanPro()}>清空</span></li> */}
						<li   className=''><span className={"delete btnABC"} onClick={()=>this.choosekey("删除")}></span></li>
					</ul>
					:<ul className='clearfix ul_keybord' style={{bottom:this.props.bottom||'50px',zIndex:this.state.zIndex}}>
						<div className="btnTxt">
							<span onClick={() => this.cleanPro()}>重置</span>
							<span onClick={() => this.closePro()}>完成</span>
						</div>
						{inputContent.keyNums.map((value,i)=>{
							return(<li key={i} name="chepaiInput" className={
								i<10?'li_num':i===20?'li_zm ikey20':i>28?'li_zm li_w':'li_zm'
							}><span name="chepaiInput" className={`${
                          value === "删除" ? "delete btnABC" : ""
                        } ${value === "地区" ? "btnABC" : ""}`} onClick={()=>this.choosekey(value)}>{value!=="删除"?value:""}</span></li>)
						})}
					</ul>
				}
			</div>:''}
		</div>)
	}
}

export default Chepai;
